<template>
	<view class="material">
		<view class="ygregister_bos">
			<view class="ygregister_title">姓名</view>
			<view class="ygregister_box">
				<input class="input_ygregister" :value="infobj.name" placeholder="请输入您的真实姓名" maxlength="8"
					@input="Onname" placeholder-class="placeholderClass" />
			</view>
		</view>
		<view class="ygregister_bos">
			<view class="ygregister_title">性别</view>
			<view class="sex_bos">
				<view class="sex_box" @click="Onsex('1')">
					<view class="sex_title">男</view>
					<view class="sex_chooise">
						<view v-show="infobj.sex=='1'"></view>
					</view>
				</view>
				<view class="sex_box sex_boxs" @click="Onsex('2')">
					<view class="sex_title">女</view>
					<view class="sex_chooise">
						<view v-show="infobj.sex=='2'"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="ygregister_bos">
			<view class="ygregister_title">联系电话</view>
			<view class="ygregister_box">
				<input class="input_ygregister" :value="infobj.mobile" type="number" placeholder="请输入您的联系电话"
					maxlength="11" @input="Onphone" placeholder-class="placeholderClass" />
			</view>
		</view>
		<view class="upload_bos">
			<view class="upload_title">工作照</view>
			<view class="upload_all">
				<view class="updown upload_box" @click="Onimgopen" v-if="infobj.img == ''">
					<image src="../../static/doctor/image.png"></image>
					<view class="updown_add">添加照片</view>
				</view>
				<view v-else class="upload_list upload_box">
					<image class="upload_info" :src="http_img+infobj.img" mode="aspectFill"></image>
					<image @click="Onclose" class="upload_close" src="../../static/close_a.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="ygregister_bos" @click="Onthree">
			<view class="ygregister_title">职称</view>
			<view class="ygregister_box">
				<view v-if="infobj.academic_title_id" class="input_ygregister ellipsis">{{academic_title_name}}</view>
				<view v-else class="placeholderClass">请选择职称</view>
			</view>
			<view class="ygregister_image">
				<image src="../../static/doctor/moreyg.png"></image>
			</view>
		</view>
		<!-- <view class="ygregister_bos" @click="Onone">
			<view class="ygregister_title">一级科室</view>
			<view class="ygregister_box">
				<view v-if="infobj.room_type_id" class="input_ygregister ellipsis">{{onename}}</view>
				<view v-else class="placeholderClass">请选择一级科室</view>
			</view>
			<view class="ygregister_image">
				<image src="../../static/doctor/moreyg.png"></image>
			</view>
		</view> -->
		<view class="ygregister_bos" @click="Ontwo">
			<view class="ygregister_title">科室</view>
			<view class="ygregister_box">
				<view v-if="infobj.room_id" class="input_ygregister ellipsis">{{twoname}}</view>
				<view v-else class="placeholderClass">请选择科室</view>
			</view>
			<view class="ygregister_image">
				<image src="../../static/doctor/moreyg.png"></image>
			</view>
		</view>
		<view class="upload_bos">
			<view class="upload_title">擅长</view>
			<view class="upload_all">
				<textarea class="textarea_ygregister" :value="infobj.be_good_at_synopsis" placeholder="请输入您的擅长项目" @input="Ongoodat"
					placeholder-class="placeholderClass" />
			</view>
		</view>
		<view class="upload_bos">
			<view class="upload_title">简介</view>
			<view class="upload_all">
				<textarea class="textarea_ygregister" :value="infobj.synopsis" placeholder="请输入您的简介" @input="Onsynopsis"
					placeholder-class="placeholderClass" />
			</view>
		</view>
		<!-- 确定 -->
		<view class="qx_button">
			<view @click="Onsubmit" class="font-323232 font16">确定</view>
		</view>
		<!-- 一级科室 -->
		<Compicker ref="Compicker1" title="选择一级科室" @Onreturn="Onreturn1"></Compicker>
		<!-- 一级科室 -->
		<Compicker ref="Compicker2" title=" " @Onreturn="Onreturn2"></Compicker>
		<!-- 职称 -->
		<Compicker ref="Compicker3" title=" " @Onreturn="Onreturn3"></Compicker>
		<!-- 下拉弹窗 -->
		<uni-popup ref="Compopup" type="bottom">
			<view class="popup_bos">
				<view class="up_choicea" @click="Onalbum('album')">从相册中选择</view>
				<view class="up_choicebor"></view>
				<view class="up_choiceb" @click="Onalbum('camera')">拍照</view>
			</view>
		</uni-popup>
	</view>


</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Compicker from '@/components/Compicker.vue'
	export default {
		components: {
			uniPopup,
			Compicker
		},
		onLoad() {
			//详情
			this.Ondoctor()

			// this.Onjopdata()
		},
		data() {
			return {
				http_img: this.$store.state.http_img, //图片
				//提交信息
				infobj: {
					name: '',
					sex: null,
					mobile: '',
					img: '',
					academic_title_id: null,
					room_type_id: null,
					room_id: null,
					be_good_at_synopsis: '',
					synopsis: '',
				},
				academic_title_name: '', //职称名字
				onename: '', //一级科室名字
				twoname: '', //二级科室名字
				medicineList: [], //科室列表
			}
		},
		methods: {
			//详情
			Ondoctor() {
				//科室列表
				this.$Http({
					url: 'getUserInfo',
					type: 'POST',
					data: {},
				}).then(res => {
					if (res.code == 1) {
						let doctor_info = res.data.doctor_info
						this.infobj.name = doctor_info.name
						this.infobj.sex = doctor_info.sex
						this.infobj.mobile = doctor_info.mobile
						this.infobj.img = doctor_info.img
						this.infobj.academic_title_id = doctor_info.academic_title_id
						this.infobj.room_type_id = doctor_info.room_type_id
						this.infobj.room_id = doctor_info.room_id
						this.infobj.be_good_at_synopsis = doctor_info.be_good_at_synopsis
						this.infobj.synopsis = doctor_info.synopsis
						//职称
						this.OnacademicTitle()
						//科室列表
						// this.OnroomList()
						//二级科室
						this.Onroom()
					}
				});
			},
			//姓名
			Onname(e) {
				this.infobj.name = e.detail.value
			},
			//手机号码
			Onphone(e) {
				this.infobj.mobile = e.detail.value
			},
			//职称
			Ontitle(e) {
				this.infobj.title = e.detail.value
			},
			//擅长
			Ongoodat(e) {
				this.infobj.be_good_at_synopsis = e.detail.value
			},
			//简介
			Onsynopsis(e) {
				this.infobj.synopsis = e.detail.value
			},
			//性别
			Onsex(e) {
				this.infobj.sex = e
			},
			//职称
			OnacademicTitle() {
				this.$Http({
					url: 'academicTitle',
					data: {},
					token: false
				}).then(res => {
					if (res.code == 1) {
						let onelist = [{
							id: 0,
							title: '选择职称'
						}]
						res.data.forEach(item => {
							let obj = {
								title: item.name,
								id: item.id,
							}
							onelist.push(obj)
							if (item.id == this.infobj.academic_title_id) {
								this.academic_title_name = item.name
							}
						})
						this.$refs.Compicker3.Ondata(onelist, this.infobj.academic_title_id)
					}
				});
			},
			//打开职称
			Onthree() {
				this.$refs.Compicker3.Onopen()
			},
			//职称的返回
			Onreturn3(e) {
				this.infobj.academic_title_id = e.id
				if(e.id) this.academic_title_name = e.title
				else this.academic_title_name = ""
			},
			//获取列表
			OnroomList() {
				this.$Http({
					url: 'roomType',
					data: {},
					token: false
				}).then(res => {
					if (res.code == 1) {
						let onelist = []
						res.data.forEach((item, index) => {
							let obj = {
								title: item.name,
								id: item.id,
							}
							onelist.push(obj)
							if (item.id == this.infobj.room_type_id) {
								this.onename = item.name
							}
						})
						this.$refs.Compicker1.Ondata(onelist, this.infobj.room_type_id)
					}
				});
			},
			//打开一级科室
			Onone() {
				this.$refs.Compicker1.Onopen()
			},
			//一级科室的返回
			Onreturn1(e) {
				if (e.id != this.infobj.room_type_id) {
					this.onename = e.title
					this.infobj.room_type_id = e.id
					this.twoname = ''
					this.infobj.room_id = ''
					this.$refs.Compicker2.Ondata([], '')
					this.Onroom()
				}
			},
			// 二级科室
			Onroom(){
				this.$Http({
					url: 'room',
					data: {
						room_type_id:0//this.infobj.room_type_id
					},
					token: false
				}).then(res => {
					if (res.code == 1) {
						let onelist = [{
							id: 0,
							title: "选择科室",
						}]
						res.data.forEach((item, index) => {
							let obj = {
								title: item.name,
								id: item.id,
							}
							onelist.push(obj)
							if (item.id == this.infobj.room_id) {
								console
								this.twoname = item.name
							}
						})
						this.$refs.Compicker2.Ondata(onelist, this.infobj.room_id)
					}
				});
			},
			//打开二级科室
			Ontwo() {
				// if (this.onename == '') {
				// 	uni.showToast({
				// 		title: '请先选择一级科室',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				this.$refs.Compicker2.Onopen()
			},
			//二级科室的返回
			Onreturn2(e) {
				this.infobj.room_id = e.id
				if(e.id) this.twoname = e.title
				else this.twoname = ""

			},
			//打开上传图标弹窗
			Onimgopen() {
				this.$refs.Compopup.open()
			},
			//上传图片
			Onalbum(choois) {
				let that = this
				let list = this.uploadList
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: [choois],
					success(res) {
						let exceed = true
						res.tempFiles.forEach(item => {
							if (item.size > 1000000) {
								exceed = false
							}
						})
						that.$refs.Compopup.close()
						if (!exceed) {
							uni.showToast({
								title: '上传图片大于1M请重新上传',
								icon: 'none',
								duration: 2000
							})
							return
						}
						res.tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: that.$Config.http_static+'api/common/uploader',
								filePath: item,
								name: 'file',
								success: function(res1) {
									let resdata = JSON.parse(res1.data)
									if (resdata.code == 1) {
										that.infobj.img = resdata.data.url
									} else {
										uni.showToast({
											title: resdata.msg,
											icon: 'none',
											duration: 2000
										})
									}
								},
								fail: function(res) {}
							})
						})
					},
					fail(res) {
						nui.showToast({
							title: '上传图片失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//删除照片
			Onclose(e) {
				this.infobj.img = ''
			},
			//提交
			Onsubmit() {
				for (let key in this.infobj) {
					if (this.infobj[key] == '') {
						uni.showToast({
							title: '请填写完所有资料',
							icon: 'none',
							duration: 2000
						})
						return
					}
				}
				if (!(/^1[12345789]\d{9}$/.test(this.infobj.mobile)) || this.infobj.mobile.length != 11) {
					uni.showToast({
						title: '手机号码格式错误',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.$Http({
					url: 'editSelf',
					data: this.infobj,
					show: true,
					type: 'post'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 2000
						})
					}
				});
			}

		}
	}
</script>

<style>
	.material {
		padding: 30rpx 0 160rpx 0;
	}

	/* 姓名 */
	.ygregister_bos {
		width: 680rpx;
		height: 100rpx;
		margin-left: 35rpx;
		display: flex;
		border-bottom: 1rpx solid #f5f5f5;
	}

	/* 标题 */
	.ygregister_title {
		width: 160rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #323232;
		font-weight: 700;
	}

	/* 中间 */
	.ygregister_box {
		width: 476rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.placeholderClass {
		color: #c8c8c8;
		font-size: 30rpx;
		line-height: 100rpx;
	}

	.input_ygregister {
		width: 476rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #323232;
	}


	/* 性别 */
	.sex_bos {
		width: 520rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #323232;
	}

	.sex_box {
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.sex_boxs {
		margin-left: 170rpx;
	}

	.sex_title {
		margin-right: 18rpx;
	}

	.sex_chooise {
		width: 28rpx;
		height: 28rpx;
		border-radius: 14rpx;
		border: solid 2rpx #6ccbb6;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sex_chooise view {
		width: 16rpx;
		height: 16rpx;
		background-color: #6ccbb6;
		border-radius: 8rpx;
	}

	/* 工作照 */
	.upload_bos {
		width: 680rpx;
		padding: 20rpx 0;
		/* height: 100rpx; */
		margin-left: 35rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.upload_title {
		width: 160rpx;
		font-size: 30rpx;
		color: #323232;
		font-weight: 700;
	}

	.upload_all {
		width: 476rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 添加图片 */
	.upload_box {
		width: 140rpx;
		height: 140rpx;
		border-radius: 5rpx;
		float: left;
		/* margin-right: 45rpx; */
		margin: 20rpx 0rpx;
	}

	.updown {
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.updown image {
		width: 50rpx;
		height: 43rpx;
		margin-bottom: 22rpx;
	}

	.updown_add {
		font-size: 24rpx;
		color: #c8c8c8;
	}

	.upload_list {
		width: 140rpx;
		height: 140rpx;
		border-radius: 5rpx;
		position: relative;
	}

	.upload_info {
		width: 140rpx;
		height: 140rpx;
		border-radius: 5rpx;
		background-color: #ffffff;
	}

	.upload_close {
		position: absolute;
		top: -21rpx;
		right: -21rpx;
		width: 42rpx;
		height: 42rpx;
	}

	/* 下拉列表 */

	/* 下拉 */
	.ygregister_image {
		width: 44rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.ygregister_image image {
		width: 20rpx;
		height: 10rpx;
	}

	/* 富文本 */
	.textarea_ygregister {
		line-height: 50rpx;
		color: #323232;
		width: 530rpx;
		height: 200rpx;
		background-color: #f9f9f9;
		border-radius: 5rpx;
		padding: 16rpx 26rpx;
	}

	/* 提交 */
	.qx_button {
		width: 750rpx;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f9f9f9;
		z-index: 2;
	}

	.qx_button view {
		width: 650rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: 50rpx;
		margin-top: 20rpx;
		background-color: #6bcbb6;
		color: #fff;
	}

	/* 选择按钮 */
	.popup_bos {
		background-color: #FFFFFF;
		z-index: 999;
		position: relative;
	}

	.up_choicea {
		width: 750rpx;
		text-align: center;
		padding: 35rpx 0;
		font-size: 30rpx;
		color: #4a4747;
	}

	.up_choiceb {
		width: 750rpx;
		text-align: center;
		padding: 35rpx 0;
		font-size: 30rpx;
		color: #4a4747;
	}

	.up_choicebor {
		width: 700rpx;
		height: 2rpx;
		background-color: #f6f6f6;
		margin: 0 auto;
	}
</style>
